<script type="text/javascript" src="/site_media/js/flowplayer-3.0.3.min.js"></script>
<form action="/user/basket/add_assets/" method="post" onsubmit="return check_basket(this);" id="add_asset_to_basket">
	<div style="overflow:auto;height:300px;width:230px;">
	{% for a in assets %}
		<div style="display:block;width:200px;height:;border:1px solid black;cursor: pointer;text-align: center;"
			class="assets" type="{{a.type}}" url="{{a.url}}">
			<input name="selected_asset" type="checkbox" value="{{a.id}}" onclick="select_effect(this);">
			 {{a.title|truncatewords:2}}
			<br>
			<img src="/{{a.avatar}}" width="160px" height="90px" />		
		</div>
	{% endfor %}
	</div>
	<div style="position:absolute; left:250px; top:0px;width:500px;height:300px; overflow:auto;" id="asset_player">
	</div>
	<hr>
	<div>	
		<select name="basket">
			<option value="">-------</option>
{% for ba in bas %}
			<option value="{{ba.id}}">{{ba.name}}</option>
{% endfor %}
		</select>
		<input name="asset_id" type="hidden" id= value="{{video.id}}"/>
		<input type="button" onclick="add_to_basket();" value="Add to basket"/>	
	</div>
</form>
<script>
	$(function(){
		$("div.assets").click(function(e){
			if (e.target.tagName != "INPUT"){
				play_asset($(this).attr("type"), $(this).attr("url"));
			}
		});
	});
</script>